<template>
  <div>
    <SearchBar @onSearch="handleSearch">
      <SearchBarItem label="名称:" :labelLg="5">
        <Input type="text" v-model="queryParam.name.value" placeholder="请输入, 支持模糊查询" clearable />
      </SearchBarItem>
      <SearchBarItem label="编号:" :labelLg="5">
        <Input type="text" v-model="queryParam.sn.value" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="纳税人识别号:" :labelLg="8">
        <Input type="text" v-model="queryParam.num.value" placeholder="请输入" clearable />
      </SearchBarItem>
    </SearchBar>
    <RemoteTable :namespace="namespace" :columns="columns" @onSortChange="onSortChange">
      <Authc permissions="invoice:taxpayer:add">
        <Button type="primary" to="add">新增</Button>
      </Authc>
    </RemoteTable>
  </div>
</template>

<script>
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import config from "@/utils/config";
import Action from "./Action";
import Authc from "@/components/Authc";
import { namespace } from "../module";
import { Button, Input, Modal, Message } from "view-design";
export default {
  name: "TaxpayerListView",
  components: {
    RemoteTable,
    Button,
    Input,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Modal,
    RemoteSelect,
    Authc
  },
  data: function() {
    let vm = this;
    return {
      editId: null,
      namespace: namespace,
      columns: [
        {
          title: "编号",
          key: "sn",
          align: "center",
        },
        {
          title: "名称",
          key: "name",
          align: "center",
        },
        {
          title: "纳税人识别号",
          key: "num",
          align: "center",
        },
        {
          title: "法人代表",
          key: "legalPersonName",
          align: "center",
        },
        {
          title: "联系人电话",
          key: "phone",
          align: "center",
        },
        {
          title: "城市",
          key: "cityName",
          align: "center",
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: 90,
          render: (h, params) => {
            let text = params.row.status == '1' ? '可用' : '不可用';
            return h('span', {}, text);
          }
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          permissions: ["invoice:taxpayer:detail"],
          width: 90,
          render: function(h, data) {
            return h(Action, {
              props: {
                row: data.row
              }
            });
          }
        }
      ]
    };
  },
  computed: {
    queryParam: {
      get() {
        return this.$store.state[namespace].query;
      }
    }
  },
  methods: {
    handleSearch() {
      this.$store.dispatch(`${namespace}/query`, {
        limit: {
          currentPage: 1
        }
      });
    },
    onSortChange(sort) {
      if (sort.order === "normal") {
        this.queryParam.order = [];
      } else {
        this.queryParam.order = [sort.key + " " + sort.order];
      }
      this.handleSearch();
    }
  }
};
</script>

<style>
</style>